<template>
  <div class="cell_wrap">
    <van-cell>
      <template #title>
        <div class="title-box">
          <span>{{ artObj.title }}</span>
          <img v-if="artObj.cover.type ===1" v-lazy="artObj.cover.images[0]" alt="" class="thumb">
        </div>
        <!-- 三图片 -->
        <div v-if="artObj.cover.type >1" class="thumb-box">
          <img  class="thumb" v-lazy="str" v-for="(str,index ) in artObj.cover.images" :key="index">
        </div>
      </template>
      <template #label>
        <div class="label-box">
          <span>
            {{artObj.aut_name}}&nbsp;&nbsp;&nbsp;
            {{artObj.comm_count}}评论&nbsp;&nbsp;&nbsp;
            {{timeTo(artObj.pubdate)}}
          </span>
          <van-icon name="cross" @click="show=true"></van-icon>
        </div>
      </template>
    </van-cell>
    <!-- 文章底部的反馈列表 -->
    <van-action-sheet get-container="body"  v-model="show" :actions="actions"   cancel-text="取消" @select="onSelect" />
  </div>
</template>

<script>
import { timeTo } from '@/utils'
export default {
  data () {
    return {
      show: false,
      actions: [],
      oneAction: [{ name: '不敢兴趣' }, { name: '反馈垃圾内容' }, { name: '拉黑作者' }]
    }
  },
  props: {
    artObj: Object
  },
  created () {
    this.actions = this.oneAction
  },
  methods: {
    timeTo: timeTo,
    onSelect (action, index) {
      if (action.name === '反馈垃圾内容') {
        this.actions = [
          {
            value: -1,
            name: '返回'
          },
          {
            value: 0,
            name: '其它问题'
          },
          {
            value: 1,
            name: '标题夸张'
          },
          {
            value: 2,
            name: '低俗色情'
          },
          {
            value: 3,
            name: '错别字多'
          },
          {
            value: 4,
            name: '旧闻重复'
          },
          {
            value: 6,
            name: '内容不实'
          },
          {
            value: 8,
            name: '侵权'
          },
          {
            value: 5,
            name: '广告软文'
          },
          {
            value: 7,
            name: '涉嫌违法犯罪'
          }]
      } else if (action.name === '返回') {
        this.actions = this.oneAction
      } else {
        // 删除数据
        this.$emit('removeArt', this.artObj.art_id)
      }
    }
  }

}
</script>

<style scoped lang="less">
/* 方式1 */
/* .cell_wrap /deep/ .van-icon-cross{
    display:flex;
    align-items: flex-end;
    padding-bottom:5px;
} */
// 方式2
.title-box {
  // 标题样式
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.label-box {
  // label描述样式
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.thumb {
  // 矩形黄金比例：0.618
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>
